<template>
  <div class="comman_and">
    <el-dialog
      @close="handleClose"
      :lock-scroll="false"
      close-on-press-escape
      v-dialogDrag
      title="命令详情"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
    >
      <div style="position: relative; margin-bottom: 20px">
        <!-- <div class="dividing-line"></div> -->
        <!-- <div class="text">详情</div> -->
        <MyTitle title="详情"></MyTitle>
        <div class="textFlex">
          <el-tooltip
            class="item"
            effect="dark"
            :content="detailData.token"
            placement="top-start"
          >
            <div class="commandToken">Token ：{{ detailData.token }}</div>
          </el-tooltip>
          <div class="commandToken">名称 ：{{ detailData.name }}</div>
          <el-tooltip
            class="item"
            effect="dark"
            :content="detailData.namespace"
            placement="top-start"
          >
            <div class="commandToken">
              命名空间 ：{{ detailData.namespace }}
            </div>
          </el-tooltip>
          <div class="explain1">说明 ：{{ detailData.description }}</div>
          <!-- <div class="explain1">说明 ：{{ detailData.description }}</div> -->
        </div>
      </div>

      <div style="position: relative; margin-bottom: 20px">
        <MyTitle title="参数"></MyTitle>
        <!-- <div class="dividing-line"></div>
        <div class="text">参数</div> -->
        <el-table
          :data="detailData.parameters"
          style="width: 100%"
          height="100"
          size="mini"
        >
          <el-table-column prop="name" label="参数名称" align="center">
          </el-table-column>
          <el-table-column prop="type" label="参数类型" align="center">
          </el-table-column>
          <el-table-column
            prop="required"
            :formatter="formatter"
            label="是否必填"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>

      <div style="position: relative; height: 110px">
        <!-- <div class="dividing-line"></div>
        <div class="text">元数据</div> -->
        <MyTitle title="元数据"></MyTitle>
        <el-table
          :data="metadataArr"
          style="width: 100%"
          height="100px"
          size="mini"
        >
          <el-table-column prop="key" label="键"> </el-table-column>
          <el-table-column prop="value" label="值"> </el-table-column>
        </el-table>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button v-if="isEditbtn" size="mini" @click="openCommandEdit"
          >编 辑</el-button
        >
        <el-button size="mini" type="primary" @click="showDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MyTitle from "@/components/MyTitle";
export default {
  components: {
    MyTitle,
  },
  props: {
    commandDteails: {
      type: Boolean,
      default: false,
    },
    isEditbtn: {
      type: Boolean,
      default: true,
    },
    detailData: {
      type: Object,
      required: true,
    },
    deviceTypeToken: {
      type: String,
      default: true,
    },
  },
  data() {
    return {
      showDialog: false,
      commandGetToken: "",
      metadata: [
        {
          key: "key",
          value: "value",
        },
        {
          key: "key",
          value: "value",
        },
      ],
      commandsListToken: "",
      metadataArr: [],
    };
  },
  watch: {
    commandDteails(newVal, oldVal) {
      this.showDialog = this.commandDteails;
    },
    detailData: {
      handler(newVal, oldVal) {
        console.log("detailData", newVal);
        let arr = [];
        let keyArr = Object.keys(this.detailData.metadata);
        keyArr.forEach((item) => {
          this.detailData.metadata[item];
          arr.push({
            key: item,
            value: this.detailData.metadata[item],
          });
        });
        this.metadataArr = arr;
        console.log(Object.keys(this.detailData.metadata));
      },
    },
  },
  mounted() {},
  methods: {
    // 弹窗关闭改变参数
    handleClose() {
      this.$emit("openDteails", "false");
    },
    // 弹窗取消键
    cancel() {
      this.$emit("openDteails", "false");
    },
    // 命令详情弹窗打开命令编辑
    openCommandEdit() {
      this.$emit("editCommand", this.detailData, true);
    },
    // 列表转换布尔值
    formatter(row, index) {
      if (row.required == true) {
        row.required = "是";
      }
      if (row.required == false) {
        row.required = "否";
      }
      return row.required;
    },
  },
};
</script>

<style scoped lang='scss'>
.comman_and /deep/ .title_box {
  padding-left: 0;
}
.textFlex {
  margin-left: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.dividing-line {
  display: inline-block;
  height: 24px;
  width: 4px;
  margin: 0 10px;
  vertical-align: middle;
  background-color: #2680d2;
}
.text {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  position: absolute;
  top: 2px;
  left: 20px;
}
.commandToken {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.commandName {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nominate {
  margin-top: 15px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 30%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.explain1 {
  margin-top: 10px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
  color: #666666;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>